@green: #008c8c;
.list {
  .content-center();
  .absolute-center();
  color: @green;
  .border-reduis(3px);
  li {
    margin: 1em;
    .border-reduis();
    &:hover {
      background-color: @green;
      color: #fff;
    }
  }
}

// 如果带（）表示是一个混合，编译成css后不会带上这个样式类
.border-reduis(@r:5px) {
  border-radius: @r;
}

.content-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.absolute-center(@type: absolute) {
  position: @type;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
